<template>
  <div class="de-detail">
    <div v-show="!showPicDetail">
      <div class="bread-box but20">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item class="btn-green" style=" color: #3DC094;" @click.native="handleBack">资源饰品类样品配置</el-breadcrumb-item>
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div>
          <el-button size="mini" @click="handleBack">返回</el-button>
        <!-- <el-button type="primary" size="mini" @click="clickNextStep">确认</el-button> -->
        </div>
      </div>
      <c-list :column="3">
        <c-list-item label="产品配置单" :value="formData.configCode" />
        <c-list-item label="对应产品配置任务" :value="formData.configTaskCode" />
        <c-list-item label="任务来源" dict-type-code="PRODUCT_CONFIG_TASK_SOURCE" :value="formData.source" />
        <c-list-item label="产品配置类型" dict-type-code="PRO_CONFIG_TYPE" :value="formData.proConfigType" />
        <c-list-item label="产品配置进度" dict-type-code="ACC_SCHEDULE" :value="formData.schedule" />
        <c-list-item label="产品配置状态" dict-type-code="PRODUCT_CONFIG_STATE" :value="formData.state" />
        <c-list-item label="门店建设项目号" :value="formData.constCode" />
        <c-list-item label="所属客户编码" :value="formData.clientCode" />
        <c-list-item label="所属客户名称" :value="formData.clientName" />
        <c-list-item label="所属门店编码" :value="formData.shopCode" />
        <c-list-item label="所属门店名称" :value="formData.shopName" />
        <c-list-item label="所属办事处" :value="formData.officeName" />
        <c-list-item label="产品配置人员" :value="formData.proConfiguratorName" />
        <c-list-item label="需求提报结果" dict-type-code="DEMAND_RESULT" :value="formData.demandReportResult" />
        <c-list-item label="需求提报时间" :value="formData.demandReportTime" />
        <c-list-item label="预计要货时间" :value="formData.expectRequireGoodsTime" />
        <c-list-item label="实际要货时间" :value="formData.actualRequireGoodsTime" />
        <c-list-item label="最早要货时限" :value="formData.earlyRequireGoodsTimeLimit" />
        <!-- <c-list-item label="最迟要货时限" :value="formData.expectRequireGoodsTime" /> -->
        <c-list-item label="确认打款时间" :value="formData.demandConfirmTime" />
        <c-list-item label="要货性质" dict-type-code="REQUIRE_GOODS_NATURE" :value="formData.requireGoodsNature" />
        <!-- <c-list-item label="产品配置人员" :value="formData.proConfiguratorName" /> -->
        <c-list-item label="要货业务账号" :value="`${formData.billerCode}-${formData.billerName}`" />
        <c-list-item label="送达方编码" :value="formData.serveCode" />
        <c-list-item label="送达方名称" :value="formData.serveName" />
        <c-list-item label="创建时间" :value="formData.createTime" />
        <c-list-item label="创建人" :value="formData.createBy" />
        <c-list-item label="修改人" :value="formData.lastUpdateBy" />
        <c-list-item label="修改时间" :value="formData.lastUpdateTime" />
        <c-list-item label="产品配置终止原因" :value="formData.endReason" />
        <c-list-item label="关联图纸总面积" :value="formData.picTotalArea" />
      </c-list>
      <c-permission-tabs>
        <el-tab-pane label="关联图纸" name="reDraw">
          <ReDraw :detail-data="formData.designPictureDtos" @checkDetail="checkPicDetail" />
        </el-tab-pane>
        <el-tab-pane label="产品配置附件" name="configAccessory">
          <Accessory type="configAccessory" :detail-data="formData.id" />
        </el-tab-pane>
        <el-tab-pane label="开单明细附件" name="detailAccessory">
          <Accessory type="detailAccessory" :detail-data="formData.id" />
        </el-tab-pane>
        <el-tab-pane label="订单进度跟进" name="orderProgress">
          <Progress type="orderProgress" :detail-data="productConfigOrderDtos" />
        </el-tab-pane>
        <el-tab-pane label="饰品清单" name="ornament">
          <OrnamentCon type="ornament" />
        </el-tab-pane>
      </c-permission-tabs>
    </div>
    <detail v-if="showPicDetail" :shop-config-data="rowId" page-flag="shopConfig" :page-show.sync="showPicDetail" @goBack="backDetail" />
  </div>
</template>
<script>
import ReDraw from './components/reDraw'
import Accessory from './components/accessory'
import Progress from './components/progress'
import detail from '../../shopDrawing/management/detail.vue'
import { getProConfigEditData } from '@/api/proConfig'
import OrnamentCon from './configEdit/components/ornamentCon.vue'
export default {
  name: 'PCDecorationDetail',
  components: {
    ReDraw,
    Accessory,
    Progress,
    OrnamentCon,
    detail
  },
  data() {
    return {
      showPicDetail: false,
      formData: {
        designPictureDtos: [],
        shopAttachmentDtos: []
      },
      productConfigOrderDtos: [],
      activedPicData: {},
      activedProAccessory: {},
      activedMitAccessory: {},
      activedOrderProgress: {}
    }
  },
  created() {
    this.formData.id = this.$route.params.id
    getProConfigEditData(this.$route.params.id).then(res => {
      if (res.success && res.data) {
        this.formData = res.data
        // this.activedPicData.data = this.formData.designPictureDtos
        // this.activedProAccessory.data = this.formData.shopAttachmentDtos
        this.productConfigOrderDtos = this.formData.productConfigOrderDtos
        this.getPicTotalArea()
      }
    })
  },
  methods: {
    handleBack() {
      this.clearForm()
      this.$store.dispatch('views/goBack')
    },
    clearForm(done) {
      this.formData = {}
      this.$refs.rulesForm && this.$refs.rulesForm.clearValidate()
      done && done()
    },
    checkPicDetail(value) {
      this.showPicDetail = value.showPicDetail
      this.rowId = value.rowId
    },
    // 计算关联图纸面积
    getPicTotalArea() {
      let area = 0
      this.formData.designPictureDtos.forEach(item => {
        area = area + (isNaN(Number(item.picTotalArea)) ? 0 : Number(item.picTotalArea))
      })
      this.formData.picTotalArea = area
    },
    // 返回配置详情
    backDetail() {
      this.showPicDetail = false
    }
  }
}
</script>
<style lang="scss" scoped>
.but20{ margin-bottom: 20px;}
.el-breadcrumb__inner .btn-green{
    color: #3DC094;
}
/deep/.el-breadcrumb__inner{
  color: $qup-color-primary;
}
</style>
